<template>
  <div class="loginfrom">
    <el-form ref="loginForm" :model="loginFromData" :rules="loginRules" class="user-layout-login" label-width="80px">
      <el-row justify="center" type="flex">
        <el-col :span="5">
          <el-form-item label="账号" prop="username" class="user">
            <span class="svg-container">
            </span>
            <el-input v-model="loginFromData.username" name="username" placeholder="请输入用户名"
                      @keyup.enter.native="submitForm">
              <template #suffix>
                <span class="input-icon">
                  <el-icon><avatar/></el-icon>
                </span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify="center" type="flex">
        <el-col :span="5">
          <el-form-item label="密码" prop="password" class="password">
            <el-input v-model="loginFromData.password" :type="lock === 'lock' ? 'password' : 'text'" name="password"
                      placeholder="请输入密码" @keyup.enter.native="submitForm">
              <template #suffix>
                <span class="input-icon">
                  <el-icon><hide :is="lock" @click="changeLock"/></el-icon>
                </span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 登录按钮 -->
      <el-row justify="center" type="flex">
        <el-col :span="5">
          <el-form-item>
            <el-button type="success" @click="submitForm" @keyup.enter.native="submitForm" class="login">登陆
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useUserStore} from '@/pinia/modules/user'

// 登录相关操作
const lock = ref('lock')
const changeLock = () => {
  lock.value = lock.value === 'lock' ? 'unlock' : 'lock'
}

// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error('用户名不能为空'))
  } else {
    callback()
  }
}

const checkPassword = (rule, value, callback) => {
  if (value.length < 1) {
    return callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}

const loginForm = ref(null)
const loginFromData = ref({
  username: "admin",
  password: "admin@123"
})

//验证规则
const loginRules = ref({
  username: [
    {
      required: true,
      validator: checkUsername,
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'change',
      validator: checkPassword,
    }
  ]
})

const store = useUserStore()

const login = async () => {
  return await store.LoginIn(loginFromData.value)
}

const submitForm = () => {
  loginForm.value.validate(async (v) => {
    if (v) {
      const flag = await login()
    } else {
      ElMessage({
        type: 'error',
        message: '用户名/密码错误',
        showClose: true,
      })
      return false
    }
  })
}
</script>


<style lang="scss" scoped>
.user-layout-login {
  position: relative;
  top: 250px;
}

.loginfrom {
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #f0f2f5 url(../../assets/images/bg2.jpg) no-repeat 0;
  background-size: cover;
}

.el-form-item label::before {
  font-size: 29px;
}
.el-button{
  padding:0px;
}

.login {
  background-color: rgba(78, 185, 224, 0.62) !important;
  border: 3px white solid;
  text-align:center;
  word-spacing: 1.5em;
  color: white !important;
  width: 120px;
  height: 40px;
  border-radius: 35px;
  font-size: 20px;
  letter-spacing: 3px;
  margin: auto;
}

.login:hover {
  font-size: 21px;
  transition: width 2s;
}

</style>